import { connect } from 'dva'

import { ConfigProvider } from 'antd'
import { IntlProvider, addLocaleData, FormattedMessage } from 'umi/locale';
import LaguageSelect from '@/pages/LanguageSelect'


const BasicLayout = (props) => {
  const { dispatch, GlobalModel } = props
  const { selectedLocaleFlag, localeList, antdLocale, appLocaleData, appLocaleMessage } = GlobalModel
  addLocaleData(...appLocaleData.data);
  const languageSelectProps = {
    selectedLocaleFlag,
    languageList: localeList,
    onLanguageChange(changeValue) {
      dispatch({
        type: 'GlobalModel/query',
        localeFlag: changeValue
      })
    }
  }
  //// 控制当界面中使用的国际化资源key缺少对应值时,是否在web控制台打印错误日志
  const customIntlProviderErrorHandler = (errMsg) => {
    if (process.env.ENABLE_INTL_PROVIDER_ERROR) {
      console.error(errMsg)
    }
  }
  return (
    <IntlProvider locale={ appLocaleData.key } messages={ appLocaleMessage } onError={ customIntlProviderErrorHandler }>
      <ConfigProvider locale={ antdLocale }>
        <div>
          <LaguageSelect { ...languageSelectProps }/>
          <FormattedMessage id="welcome"/>
        </div>
        <div>
          { props.children }
        </div>
      </ConfigProvider>
    </IntlProvider>
  )
}

function mapStateToProps({ GlobalModel }) {
  return { GlobalModel }
}

export default connect(mapStateToProps)(BasicLayout);
